<template>
  <CommonPage
    :scroll="false"
    :scrollProps="{ pulldownEnabled: false, pullupEnabled: false }"
    custom-class="search-page"
  >
    <div class="search-page__content">
      <div class="search-page__content-title">
        <CommonLogo
          :size="40"
          label="关心健康，从搜索开始!"
          :labelStyle="{ fontWeight: 400, fontSize: '28rpx' }"
        />
      </div>

      <div class="search-page__content-search">
        <SearchInput v-model="searchWord" @send="onManualSearch" />
      </div>

      <div class="search-page__content-history">
        <div class="search-page__content-history_title">
          <span>历史搜索</span>
          <image src="@/assets/icon/icon-delete.png" @tap="onDeleteHistory" />
        </div>
        <div class="history-group">
          <template v-if="!currentHistory.length">
            <div class="history-empty">没有历史搜索内容</div>
          </template>
          <template v-else>
            <div
              v-for="(label, index) in currentHistory"
              :key="index"
              class="history-item"
              @tap="onAutoSearch(label)"
            >
              {{ label }}
            </div>
          </template>
        </div>
      </div>
    </div>
  </CommonPage>
</template>

<script setup lang="ts">
import CommonPage from "@/components/common-page/index.vue";
import CommonLogo from "@/components/common-logo/index.vue";
import SearchInput from "./components/search-input.vue";
// import { apiQueryArticalByName } from "@/apis/knowledge";
import { ACCESS_TOKEN_CODE, ResponseCodeEnum } from "@/constants/index";
import { ref } from "vue";
import Taro, { useDidShow } from "@tarojs/taro";
import { useSearchHistory } from "@/hooks/useSearchHistory";
import { useTabBarSelected } from "@/hooks/useTabBarSelected";
defineOptions({
  name: "search-page",
});

const { setSelectIndex } = useTabBarSelected();
const { currentHistory, insertHistory, clearHistory } = useSearchHistory();
const searchWord = ref("");
const list = ref<any[]>([]);

useDidShow(() => {
  setSelectIndex(4);
});
const onRecomendSelect = (id: string) => {
  if (!Taro.getStorageSync(ACCESS_TOKEN_CODE)) {
    Taro.navigateTo({ url: "/packageA/pages/login/index" });
  } else {
    Taro.navigateTo({
      url: `/packageA/pages/knowledge-detail/index?id=${id}`,
    });
  }
};

const onAutoSearch = (text: string) => {
  onSearch(text);
};

const onManualSearch = () => {
  const text = searchWord.value;

  if (!text) {
    Taro.showToast({ title: "请输入搜索内容", icon: "none" });
    return;
  }

  insertHistory(text);
  onSearch(text);
};
const onSearch = (text: string) => {
  Taro.navigateTo({
    url: `/packageA/pages/index-search/index?text=${encodeURIComponent(text)}`,
  });

  // apiQueryArticalByName(text)
  //   .then((res: any) => {
  //     const { code, data } = res;
  //     if (code === ResponseCodeEnum.SUCCESS) {
  //       list.value = data;
  //     }
  //   })
  //   .finally(() => {
  //     Taro.hideToast();
  //   });
};

const onDeleteHistory = () => {
  clearHistory();
  list.value = [];
};
</script>

<style lang="less">
.search-page {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  &__content {
    width: 100%;
    height: 100%;
    overflow: hidden;
    &-title {
      margin-top: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    &-search {
      margin-top: 80px;
    }
    &-history {
      margin-top: 30px;
      &_title {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        span {
          font-weight: 500;
          font-size: 32px;
          color: #000000;
          line-height: 44px;
        }
        image {
          width: 26px;
          height: 25px;
        }
      }
      .history-group {
        margin-top: 24px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px;

        font-weight: 400;
        font-size: 24px;
        color: #000000;
        line-height: 34px;
        .history-empty {
          width: 100%;
          display: flex;
          justify-content: center;
        }
        .history-item {
          background: #ffffff;
          border-radius: 28px;
          border: 2px solid #d6d6d6;
          padding: 6px 12px;
        }
      }
    }
  }
}
</style>
